<?php
include "templates/page_start.tpl";
?>
<style>                
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>



<div id="form_input">
    <form action='?section=china&action=add' method='post' enctype='multipart/form-data'>
        <fieldset>
            <legend>Stammdaten</legend>

            <div class="ui-widget">
                <label for="obj_status">Im Besitz:</label>
                <input class="RadioField" name="obj_status" value="true" type="radio" checked/> Ja
                <input class="RadioField" name="obj_status" value="false" type="radio"/> Nein
            </div>

            <div class="ui-widget">
                <label for="obj_name">Name: </label>
                <input name="obj_name" type="text" class="TextField ui-corner-all" >
            </div>



            <script>
                $(document).ready(function(){
                    loadCategories();
	
                });
                function loadCategories(){
                    $.getJSON("?section=cat&action=get",
                    {},
                    function(data) {
                        var select = $('#obj_cat');
                        if(select.prop) {
                            var options = select.prop('options');
                        } else {
                            var options = select.attr('options');
                        }
                        $('option', select).remove();
 
                        $.each(data, function(cat_count, category) { 
                            options[options.length] = new Option(category.cat_name, category.cat_id);
                        });
                    });
                }
                
                $(function() {
                    $( "#add_cat" ).button();
                    $( "#add_cat" ).click(function() {
                        $( "#dialog-cat" ).dialog( "open" );
                        //alert("test"); 
                    });
                });
            </script>
            <div class="ui-widget">
                <label for='obj_cat'>Kategorie:</label>
                <select class="SelectField ui-corner-all" name="obj_cat_id" id="obj_cat"></select>
                <a id="add_cat" href="#">Hinzuf&uuml;gen</a>

            </div>




            <script>
                $(function() {
                    function log( message ) {
                        $( "<div/>" ).text( message ).prependTo( "#log" );
                        $( "#log" ).scrollTop( 0 );
                    }

                    $( "#obj_man" ).autocomplete({
                        source: "?section=field&action=find&type=manufacture",

                        minLength: 2,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
        
                    $( "#obj_lable" ).autocomplete({
                        source: "?section=field&action=find&type=lable",

                        minLength: 2,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
        
                    $( "#obj_artist_draft" ).autocomplete({
                        source: "?section=field&action=find&type=artist",

                        minLength: 2,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
        
        
                    $( "#obj_artist_design" ).autocomplete({
                        source: "?section=field&action=find&type=artist",

                        minLength: 2,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
                    
                    
                    $( "#obj_pur_place" ).autocomplete({
                        source: "?section=field&action=find&type=place",

                        minLength: 2,
                        select: function( event, ui ) {
                            log( ui.item ?
                                "Selected: " + ui.item.value + " aka " + ui.item.id :
                                "Nothing selected, input was " + this.value );
                        }
                    });
                    
        
                    $(function() {
                        $( "#obj_pur_time" ).datepicker();
                    });
        
        
                    function updateCoords(c) {
                        $('#img_chop_x').val(c.x);
                        $('#img_chop_y').val(c.y);
                        $('#img_chop_w').val(c.w);
                        $('#img_chop_h').val(c.h);
                    };


                    $(function() {
                        $('#obj_img').change(function() {
                            $(this).upload('?section=china&action=add_image', function(res) {
                                //alert('File uploaded');
                                $('#obj_img_id').val(res.image_id);
                                document.getElementById('cropbox').src=res.image_url;
                                var api = $.Jcrop('#cropbox',{ 
                                    bgColor:     'black',
                                    bgOpacity:   .4,
                                    aspectRatio: 320 / 240,
                                    onSelect: updateCoords });
                            }, 'json');
                        });
                    });

                });
            </script>
            <div class="ui-widget">
                <label for="obj_man">Manufaktur: </label>
                <input class="TextField ui-corner-all" id="obj_man" name="obj_man" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_lable">Marke: </label>
                <input class="TextField ui-corner-all" id="obj_lable" name="obj_lable" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_artist_draft">K&uuml;nstler Entwurf: </label>
                <input class="TextField ui-corner-all" id="obj_artist_draft" name="obj_artist_draft" type="text"/>
            </div>

            <div class="ui-widget">
                <label for="obj_artist_design">K&uuml;nstler Design: </label>
                <input class="TextField ui-corner-all" id="obj_artist_design" name="obj_artist_design" type="text"/>
            </div>

            <div class="ui-widget">
                <label for="obj_dating">Datierung: </label>
                <input class="TextField ui-corner-all" id="obj_dating" name="obj_dating" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_heigh">H&ouml;he: </label>
                <input class="TextField ui-corner-all" id="obj_heigh" name="obj_heigh" type="text"/>
            </div>

            <div class="ui-widget">
                <label for="obj_damage">Besch&auml;digung:</label>
                <input class="RadioField ui-corner-all" name="obj_damage" value="true" type="radio" /> Ja
                <input class="RadioField ui-corner-all" name="obj_damage" value="false" type="radio" checked/> Nein
            </div>
        </fieldset>

        <fieldset>
            <legend>Kaufinformationen</legend>
            <div class="ui-widget">
                <label>Kaufzeitpunkt:</label>
                <select class="SelectField ui-corner-all" id="obj_pur_month" name="obj_pur_month">
                    <option value="0">Monat</option>
                    <option value="1">Januar</option>
                    <option value="2">Februar</option>
                    <option value="3">M&auml;rz</option>
                    <option value="4">April</option>
                    <option value="5">Mai</option>
                    <option value="6">Juni</option>
                    <option value="7">Juli</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">Oktober</option>
                    <option value="11">November</option>
                    <option value="12">Dezember</option>
                </select>
                <input class="TextField ui-corner-all" id="obj_pur_year" name="obj_pur_year" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_pur_place">Kaufort: </label>
                <input class="TextField ui-corner-all" id="obj_pur_place" name="obj_pur_place" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_pur_price">Kaufpreis: </label>
                <input class="TextField ui-corner-all" id="obj_pur_price" name="obj_pur_price" type="text"/>
                <select class="SelectField ui-corner-all" id="obj_pur_currency" name="obj_pur_currency">
                    <option value="EUR">EUR</option>
                    <option value="DM">DM</option> 
                </select>
            </div>
            <div class="ui-widget">
                <label for="obj_ancestor">Vorbesitzer: </label>
                <input class="TextField ui-corner-all" id="obj_ancestor" name="obj_ancestor_person" type="text"/>
            </div>
            <div class="ui-widget">
                <label for="obj_present">Geschenk: </label>
                <input name="obj_present" value="true" type="radio" /> Ja
                <input name="obj_present" value="false" type="radio" checked/> Nein
            </div>
            <div class="ui-widget">
                <label for="obj_present_from">Von: </label>
                <input class="TextField ui-corner-all" id="obj_ancestor" name="obj_present_person" type="text"/>
            </div>
        </fieldset>

        <fieldset>
            <legend>Kommentar</legend>
            <textarea class="TextAreaField ui-corner-all" name="obj_comment" cols="100%" rows="10"></textarea>
        </fieldset>

        <fieldset>
            <legend>Grafik</legend>
            <img name="cropbox" width="<?php echo IMAGE_DEFAULT_W * IMAGE_VIEW_RATIO ?>" src="images/cache/image_0.jpeg" id="cropbox" alt="" />
            <br />
            <input type="hidden" id="img_chop_x" name="img_chop_x" />
            <input type="hidden" id="img_chop_y" name="img_chop_y" />
            <input type="hidden" id="img_chop_w" name="img_chop_w" />
            <input type="hidden" id="img_chop_h" name="img_chop_h" />
            <br />
            <div class="ui-widget">
                <label for="obj_img">Bilddatei:</label>
                <input class="ui-corner-all" type="file" name="obj_img" id="obj_img">
                <input type="hidden" id="obj_img_id" name="obj_img_id" />

            </div>
        </fieldset>
        <fieldset>
            <script>
                $(function() {
                    $( "input:submit, input:reset").button();
                });
            </script>

            <div class="ui-widget">
                <input type="submit" value="Absenden">
                <input type="reset" value="Zur&uuml;cksetzen">
            </div>
        </fieldset>

    </form>
</div>


<?php
include "templates/dialog_add_cat.tpl";
include "templates/page_end.tpl";
?>